<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>D站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="icon" th:href="@{/pagesResource/img/icon.png}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/animate.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/bootstrap-datepicker.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/style.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/responsive.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/pagesResource/css/color.css}">
    <script th:src="@{/js/sweetAlert.js}"></script>
</head>
<body>
<div class="wrapper">
    <div th:include="main/simpleHeader :: header"></div>
</div>
<section class="user-account">
    <div class="container user_account">
        <h1>个人设置</h1>
        <div>
            <div class="video-details">
                <!--头像-->
                <div class="latest_vidz">
                    <div class="latest-vid-option">
                        <h2 class="hd-op">头像更改</h2>
                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="blocked-pr">
                    <div class="blocked-vcp">
                        <div class="vcp_inf row">
                            <div class="col-md-4"></div>
                            <div class="col-md-2 col-md-offset-1">
                                <span class="user-icon">
                                    <img id="userImg"
                                         th:src="@{/images/userIcon/{iconPath}(iconPath=${userInfo.userIcon})}" th:alt="${userInfo.userIcon}">
                                </span>
                            </div>
                            <div class="col-md-4">
                                <form id="imgForm" enctype="multipart/form-data">
<!--                                    <label for="updateIcon">-->
<!--                                        本地下载-->
<!--                                    </label>-->
                                    <input type="submit" id="updateIcon" style="display: none">
                                    <label for="file">
                                        上传图片
                                    </label>
                                    <input name="file" id="file" type="file" accept="image/*"
                                           onchange="imgPreview(this)">
                                    <p class="img-tooltip"></p>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="latest_vidz">
                    <div class="latest-vid-option">
                        <h2 class="hd-op">个人资料</h2>
                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="account-details">
                    <form role="form" class="form-horizontal account_details_content" id="updateUserInfoForm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="userName">姓名：</label>
                            <div class="col-sm-10 change-userInfo">
                                <input type="text" name="userName" id="userName" class="form-control"
                                       th:value="${userInfo.userName}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="userPhone">手机号:</label>
                            <div class="col-sm-10 change-userInfo">
                                <input type="text" name="userPhone" id="userPhone" class="form-control"
                                       th:value="${userInfo.userPhone}" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="userGender">性别:</label>
                            <div class="col-sm-10 change-userInfo">
                                <select class="form-control" id="userGender" name="userGender">
                                    <option value="true" th:selected="${userInfo.userGender} eq true">男</option>
                                    <option value="false" th:selected="${userInfo.userGender} eq false">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="userBirthday">出生日期:</label>
                            <div class="col-sm-10 change-userInfo">
                                <input name="userBirthday" id="userBirthday" class="form-control" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label" for="userSignature">个性签名:</label>
                            <div class="col-sm-10 change-userInfo">
                                <textarea name="userSignature" id="userSignature" class="form-control"
                                          th:text="${userInfo.userSignature}" rows="3"></textarea>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-default user-account-submit">保存</button>
                    </form>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<script th:src="@{/pagesResource/js/jquery.min.js}"></script>
<script th:src="@{/pagesResource/js/jquery-form.js}"></script>
<script th:src="@{/pagesResource/js/popper.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap.min.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/pagesResource/js/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:src="@{/pagesResource/js/script.js}"></script>
<script type="text/javascript">
    var userBirthday = "[[${userInfo.userBirthday}]]";
    var arr = userBirthday.split(" ");
    $(function(){
        $('#userBirthday').val(arr[0]);
        $('#userBirthday').datepicker({
            format: 'yyyy-mm-dd', //格式
            startDate: '1922-01-01', //开始时间
            endDate: '2122-01-01', //结束时间
            autoclose: true, //选中之后自动隐藏日期选择框
            minViewMode:0,
            maxViewMode:3,
            language: 'zh-CN', //语言
            orientation: 'buttom',
            defaultViewDate:arr[0]
        });
        $("#userName").blur(checkUserName);
        $("#userPhone").blur(checkUserPhone);
        $("#userSignature").blur(checkUserSignature);
        //图片保存到本地
        $("#updateUserInfoForm").submit(function () {
            // 如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
            // 1.发送数据到服务器
            $('#imgForm').ajaxSubmit({
                url: "/user/uploadImage",
                type: "POST",
                dataType:'json',
            });
            if (checkUserName() && checkUserPhone() && checkUserSignature()) {
                var userName = $('#userName').val();
                var userPhone = $('#userPhone').val();
                var userGender = $("#userGender").val();
                var userBirthday = $('#userBirthday').val();
                var userSignature = $('#userSignature').val();
                var userIcon = $('#userImg').attr("alt");
                // 校验通过,发送ajax请求，提交表单的数据
                $.ajax(
                    {
                        type: "POST",
                        url: "/user/modifyUserInfo",
                        async: false,
                        cache: true,
                        contentType: "application/json;charset=utf-8",
                        data: JSON.stringify({
                            "userName": userName,
                            "userPhone": userPhone,
                            "userGender": userGender,
                            "userBirthday": userBirthday,
                            "userSignature": userSignature,
                            "userIcon": userIcon,
                        }),
                        success: function (data) {
                            if (data["res"] == "-1") {
                                swal("错误", "输入的手机号已经被注册过", "error");
                            } else if (data["res"] == "0"){
                                swal("错误", "修改个人信息失败", "error");
                            }else if (data["res"] == "1"){
                                swal("修改成功!", {
                                    buttons: false,
                                    timer: 2000
                                });
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                            }else{
                                swal("错误", "表单没有提交", "error");
                            }
                        },
                        error: function (data) {
                            swal("错误", "网络错误，请联系管理员！", "error");
                        }
                    }
                )
            }
            //2.不让页面跳转
            return false;
        });
    });
    /**
     * 手机号格式校验
     * */
    function checkUserPhone(){
        var userPhone = $("#userPhone").val();
        var reg_userPhone = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        var flag = reg_userPhone.test(userPhone);
        if (flag) {
            $("#userPhone").css("border", "");
        } else {
            $("#userPhone").css("border", "1px solid red");
            swal("错误","输入手机号要符合11位手机号格式","error");
        }
        // 4.返回是否通过校验
        return flag;
    }
    /**
     * 用户名格式校验
     * */
    function checkUserName(){
        var username = $("#userName").val();
        var reg_username = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,24}$/;
        var flag = reg_username.test(username);
        if (flag) {
            // 用户名合法
            $("#userName").css("border", "");
        } else {
            // 用户名非法，加一个红色边框
            $("#userName").css("border", "1px solid red");
            swal("错误","输入的姓名应在1到24个字符之间,且输入的姓名只支持中文，大小写字母和下划线","error");
        }
        // 4.返回是否通过校验
        return flag;
    }
    /**
     * 个性签名格式校验
     * */
    function checkUserSignature(){
        var userSignature = $("#userSignature").val();
        var reg_userSignature = /^.{0,200}$/;
        var flag = reg_userSignature.test(userSignature);
        if (flag) {
            // 用户名合法
            $("#userSignature").css("border", "");
        } else {
            // 用户名非法，加一个红色边框
            $("#userSignature").css("border", "1px solid red");
            swal("错误","个人签名不能超过200字","error");
        }
        // 4.返回是否通过校验
        return flag;
    }
    /**
     * 图片上传
     * */
    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }
        //获取文件
        var file = fileDom.files[0];
        //取得上传文件的类型file.files[0].type
        var fileType = file.type.split("/")[0]; //
        //取得上传文件的后缀名
        var fileExt = file.name.split(".")[1];
        //取得上传文件的大小
        var fileSize =  file.size;
        //允许上传类型正则
        var pattern = /^(jpg|png|gif|JPG|PNG|GIF)$/;
        //文件大小判断
        if(parseInt(fileSize)>(2*1024*1024)){
            swal("错误","文件大小不能超过2MB！","error");
            return;
        }
        console.log(file);
        //是否是图片
        if (fileType=="image") {
            //进行后缀名匹配
            if(pattern.test(fileExt)){
                //匹配成功
                //上传预览
                if(file){
                    //获取图片dom
                    var img = document.getElementById("userImg");
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        //图片路径设置为读取的图片
                        img.src = e.target.result;
                    };
                    img.alt = file.name;
                    $('.img-tooltip').text(file.name+"已经上传，点击保存更新头像");
                    $('.img-tooltip').attr('display', 'inline-block');
                }else{
                    swal("错误","浏览器不支持文件上传，请升级浏览器版本或者更换浏览器！","error");
                }
            }else{
                //设置提醒错误内容
                swal("错误","只允许上传这些格式的图片(jpg|png|gif|JPG|PNG|GIF)","error");
                //将组件设置为空
                file.value="";
            }
        }else{
            swal("错误","只允许上传这些格式的图片(jpg|png|gif|JPG|PNG|GIF)","error");
        }
    }
</script>
</body>
<!--<script type="text/javascript">-->
<!--    function saveInfo() {-->
<!--        var userName = $("#userName").val();-->
<!--        var userIcon = $("#fileName").val();-->
<!--        var userId = $("#userId").val();-->
<!--        var userPhone = $("#userPhone").val();-->
<!--        var userSignature = $("#userSignature").val();-->
<!--        var role = $("#role").val();-->
<!--        swal({-->
<!--            title: "确认弹框",-->
<!--            text: "确定要更新个人信息吗?",-->
<!--            icon: "warning",-->
<!--            buttons: true,-->
<!--            dangerMode: true,-->
<!--        }).then((flag) => {-->
<!--            if (flag) {-->
<!--                $.ajax(-->
<!--                    {-->
<!--                        type: "POST",-->
<!--                        url: "/user/updateUserInfo",-->
<!--                        async: false,-->
<!--                        cache: true,-->
<!--                        data: {-->
<!--                            "userId": userId,-->
<!--                            "userName": userName,-->
<!--                            "userPhone": userPhone,-->
<!--                            "userSignature": userSignature,-->
<!--                            "userIcon": userIcon,-->
<!--                            "role": role,-->
<!--                        },-->
<!--                        success: function (data) {-->
<!--                            if (data["isUpdate"] == true) {-->
<!--                                swal("修改成功!", {-->
<!--                                    buttons: false,-->
<!--                                    timer: 2000-->
<!--                                });-->
<!--                                setTimeout(function () {-->
<!--                                    window.location.reload();-->
<!--                                }, 1000);-->
<!--                            } else {-->
<!--                                swal("Error", "修改失败！", "error");-->
<!--                            }-->
<!--                        },-->
<!--                        error: function (data) {-->
<!--                            swal("Error", "网络错误，请联系管理员！", "error");-->
<!--                        }-->
<!--                    }-->
<!--                );-->
<!--            }-->
<!--        });-->

<!--    }-->

<!--    function f() {-->
<!--        swal({-->
<!--            title: "增加视频分类成功！",-->
<!--            text: "填写的标签名已存在！",-->
<!--            icon: "warning",-->
<!--            buttons: false,-->
<!--            dangerMode: true,-->
<!--        });-->
<!--    }-->

<!--</script>-->
</html>